<!DOCTYPE html><!-- 采用html5  -->
<html>

<head>
    <meta charset="UTF-8">

    <!-- 页面显示适应移动设备 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>我的APP</title>

    <link rel="stylesheet" href="resources\we-vue\style.css">
    <link rel="stylesheet" href="resources\css\font-awesome.min.css">

    <style>
        /*元素选择器*/

        html{
            height:100%;
        }
        body{
            height:100%;
            padding:0px;/*内边距*/
            margin:0px;/*外边距*/
        }

        .my-container{
            position: relative;
            width:100%;
            height:100%;
            background-color: #f0f0f0;
        }

        .my-content{
            position:absolute;
            top:53px;
            bottom:0px;
            box-sizing: border-box;
            width:100%;
            padding:3px;
            
            overflow: auto;
        }

        .my-checkbox{
            display: inline-block;
            width:24px;
            height:24px;
            border-radius:15px;
            border:1px solid #DDDDDD;            
        }

        .my-checkbox.checked{
            background-image:url(resources/images/ok2.jpg);
            background-size: 100% 100%;
            border:1px solid #DD0000;
        }

        

       
    
    </style>


</head>


<body>

    <div id="app" class="my-container">

        <wv-header :fixed="false" :title="title">
            <div slot="left">
                <i @click="back" class="fa fa-times-circle"></i>
            </div>
        </wv-header>

        <!-- 清单界面 -->
        <div v-show="currPage=='list'" class="my-content">


            <!-- 悬浮新增、删除按钮 -->
            <div style="position: fixed; top:55px;right:10px;z-index: 10;   ">
                <!--新增按钮-->
                <i @click="depToAdd" class="fa fa-plus-square" style="font-size:32px;color:#AAAAAA;"></i>

                <div style="display:inline-block; width:10px;"></div>
                <!--多删除按钮-->
                <i @click="depDoMultiDel" class="fa fa-trash-o" style="font-size:32px;color:#AAAAAA;"></i>
            </div>

            <wv-panel style="border-radius:5px;" v-for="dep in deps" :key="dep.d_id" :title="'编号：'+dep.d_id">

                <wv-media-box :title="dep.d_name" :description="dep.d_remark" type="text"></wv-media-box>

                <div slot="ft" style="display:flex;flex-direction: row; justify-content:space-between; padding-bottom:5px;padding-right:5px;">
                    <div style="position:relative;top:15px;left:8px;" class="my-checkbox" :class="{checked:checkedDids.indexOf(dep.d_id)>=0}"
                        @click="toggle(dep)"></div>
                    <div>
                        <wv-button type="default" :mini="true" @click="depToUpd(dep)">编辑</wv-button>
                        <wv-button type="default" :mini="true" @click="depDoDel(dep)">删除</wv-button>
                    </div>
                </div>
            </wv-panel>


            

        </div>

        <!-- 编辑界面 -->
        <div v-show="currPage=='upd'" class="my-content">

            <wv-panel>
                <wv-input label="编号" :readonly="true" v-model="uDep.d_id"></wv-input>
                <wv-input label="名称" v-model="uDep.d_name"></wv-input>
            </wv-panel>
            <wv-panel title="备注">
                <wv-textarea v-model="uDep.d_remark"></wv-textarea>
            </wv-panel>

            <wv-button @click="depDoUpd" type="primary" style="margin-top:10px;">保存</wv-button>

        </div>

        <!-- 新增界面 -->
        <div v-show="currPage=='add'" class="my-content">

            <wv-panel>
                <wv-input label="名称" v-model="nDep.d_name" placeholder="请输入名称"></wv-input>
            </wv-panel>
            <wv-panel title="备注">
                <wv-textarea v-model="nDep.d_remark" placeholder="请输入备注"></wv-textarea>
            </wv-panel>

            <wv-button @click="depDoAdd" type="primary" style="margin-top:10px;">保存</wv-button>



        </div>

    </div>

</body>

<script src="resources\js\vue.min.js"></script>
<script src="resources\js\jquery.min.js"></script>
<script src="resources\we-vue\index.js"></script>
<script src="resources\layer_mobile\layer.js"></script>
<script src="resources\js\my.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            
            currPage: 'list',

            title: '部门管理',

            deps: [], //清单数据

            uDep: {}, //编辑数据

            nDep: {}, //新增数据

            checkedDids: [], //选中的id

        },
        methods: {

            //获取清单数据
            loadList() {
                Serv.loadData({
                    url: '/depList.jsp'
                }, (deps) => {
                    this.deps = deps;
                });
            },

            //返回
            back() {
                if (this.currPage == 'list') {
                    window.location.href = 'home.html';
                } else if (this.currPage == 'upd' || this.currPage == 'add') {
                    this.currPage = 'list';
                }
            },

            //到编辑界面
            depToUpd(dep) {

                this.uDep = dep;
                this.title = "部门编辑";

                this.currPage = 'upd'; //当前页切换为编辑界面

            },

            //保存编辑内容
            depDoUpd() {
                Serv.operate({
                    url: '/depDoUpd.jsp',
                    data: this.uDep
                }, () => {
                    this.loadList();

                });
            },

            //到新增界面
            depToAdd() {
                this.title = "部门新增";
                this.nDep = {}; //清空新增数据
                this.currPage = 'add'; //当前页切换为新增界面
            },

            //保存新增内容
            depDoAdd() {
                Serv.operate({
                    url: '/depDoAdd.jsp',
                    data: this.nDep
                }, () => {

                    this.loadList();
                    this.back();
                });
            },

            //删除一条信息
            depDoDel(dep) {
                Serv.operate({
                        title: '警告', //提示信息标题
                        text: '您确实要删除吗？', //提示信息文字
                        url: '/depDoDel.jsp',
                        data: dep
                    },
                    () => {

                        this.loadList();

                    });
            },

            depDoMultiDel() {

                if (this.checkedDids.length == 0) {
                    TopTips('您没有选择数据！');
                    return;
                }

                Serv.operate({
                        title: '警告', //提示信息标题
                        text: '您确实要删除吗？', //提示信息文字
                        url: '/depDoMultiDel.jsp',
                        data: {
                            ids: this.checkedDids
                        }, //此时参数名称为"ids[]"
                    },
                    () => {
                        this.loadList();
                    }
                );
            },

            //选中/不选中 切换
            toggle(dep) {

                let i = 0;

                for (; i < this.checkedDids.length; i++) {
                    //console.log(this.checkedDids[i] + "---" + dep.d_id);
                    if (this.checkedDids[i] == dep.d_id) { //数组中存在编号
                        //console.log(this.checkedDids[i] + "===" + dep.d_id);
                        this.checkedDids.splice(i, 1); //删除数组中从索引i开始的1个元素
                        dep.checked = false;
                        //console.log(this.checkedDids);
                        return;
                    }
                }

                //数组中不存在编号
                this.checkedDids.push(dep.d_id);
                dep.checked = true;
                //console.log(this.checkedDids);



            },


        },
        mounted() {

            this.loadList(); //获取清单数据


        }
    });
</script>


</html>